এইচটিএমএল ডোম এইচটিএমএল ইভেন্ট ঘটলে জাভস্ক্রিপ্টকে সে অনুযায়ী কাজ করতে সাহায্য করে:
একটি ইভেন্ট ঘটলে জাভাস্ক্রিপ্ট সম্পাদন হতে পারে, যেমন একজন ব্যবহারকারী একটি এইচটিএমএল এলিমেন্টে ক্লিক করলে।
এইচটিএমএল এলিমেন্টে ক্লিক করলে কোড কার্যকর করার জন্য, এইচটিএমএল ইভেন্ট এট্রিবিউটে জাভাস্ক্রিপ্ট কোড যোগ করুনঃ
onclick="JavaScript"
এইচটিএমএল ইভেন্টের উদাহরণঃ
নিচের উদাহরণে, একজন ব্যবহারকারী <h3>এলিমেন্টে ক্লিক করলে এর কন্টেন্ট পরিবর্তিত হয়ঃ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3 onclick="this.innerHTML='স্যাট একাডেমী'">এই টেক্সটের উপর ক্লিক করুন</h3>
</body>
</html>
নিচের উদাহরণে, ইভেন্ট হ্যান্ডলার থেকে একটি ফাংশন কল করা হয়েছেঃ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3 onclick="myFunc(this)">এই টেক্সটের উপর ক্লিক করুন</h3>
<script>
function myFunc(param) {
param.innerHTML = "স্যাট একাডেমী";
}
</script>
</body>
</html>
এইচটিএমএল এলিমেন্টের মধ্যে ইভেন্ট যোগ করতে ইভেন্ট এট্রিবিউট ব্যবহার করুন।
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p id="test"></p>
<button onclick="myFunc()">ক্লিক করুন</button>
<script>
function myFunc() {
document.getElementById("test").innerHTML = "স্যাট একাডেমী";
}
</script>
</body>
</html>
উপরোক্ত উদাহরণে, বাটনে ক্লিক করলে myFunc নামের একটি ফাংশন রান হবে।
এইচটিএমএল ডোম আপনাকে জাভাস্ক্রিপ্টের মাধ্যমে এইচটিএমএল এলিমেন্টে ইভেন্ট যোগ করতে সাহায্য করেঃ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p id="test"></p>
<button id="btn">ক্লিক করুন</button>
<script>
document.getElementById("btn").onclick = myFunc;
function myFunc() {
document.getElementById("test").innerHTML = "স্যাট একাডেমী";
}
</script>
</body>
</html>
উপরোক্ত উদাহরণে, myFunc নামে একটি ফাংশনকে id="btn" যুক্ত একটি এইচটিএমএল button এলিমেন্টে যোগ করা হয়েছে।
ব্যবহারকারী একটি পেজে প্রবেশ করলে অথবা বের হয়ে গেলে Onload এবং Onunload ইভেন্ট কাজ করে।
ব্যবহারকারীর ব্রাউজারের টাইপ এবং ব্রাউজারের ভার্সন যাচাই করার জন্য এবং ঐ তথ্যের ভিত্তিতে ওয়েবপেজের যথাযথ ভার্সন লোড করতে Onload ইভেন্ট ব্যবহার করা হয়।
Onload এবং Onunload ইভেন্টটি কুকিজের জন্যেও ব্যবহার করা যেতে পারে।
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body onload="myFunc()">
<p id="test"></p>
<script>
function myFunc() {
document.getElementById("test").innerHTML = navigator.userAgent;
}
</script>
</body>
</html>
ইনপুট ফিল্ডে Onchange ইভেন্ট ব্যবহার করা হয়।
নিচের উদাহরণে কিভাবে onchange ইভেন্টটি ব্যবহার করা হয় তা দেখানো হলোঃ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
Name: <input type="text" id="name" onchange="myFunc()">
<p>ইনপুট ফিল্ডে কিছু লিখে বাহিরে ক্লিক করুন।</p>
<script>
function myFunc(){
var a = document.getElementById("name");
a.style.backgroundColor ="teal";
a.style.color ="white";
}
</script>
</body>
</html>
ব্যবহারকারী একটি এইচটিএমএল এলিমেন্টের উপর মাউস নিলে বা মাউস সরিয়ে নিলে একটি ফাংশন কাজ করানোর জন্য Onmouseover এবং Onmouseout ইভেন্ট ব্যবহার করা হয়ঃ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<div onmouseover="myFunc1(this)" onmouseout="myFunc2(this)"
style="border: 2px solid teal;padding:40px;">
মাউস আনুন।</div>
<script>
function myFunc1(param) {
param.innerHTML = "ধন্যবাদ"
}
function myFunc2(param) {
param.innerHTML = "মাউস আনুন"
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<div onmouseover="myFunc1(this)" onmouseout="myFunc2(this)"
style="border: 2px solid teal;padding:40px;">
মাউস আনুন।</div>
<script>
function myFunc1(param) {
param.innerHTML = "ধন্যবাদ"
}
function myFunc2(param) {
param.innerHTML = "মাউস আনুন"
}
</script>
</body>
</html>
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
